<template>
  <div class="app-container">
    <el-form ref="thForm" :model="thForm">
      <!-- CPU 负载-->
      <el-row>
        <el-col style="width: 220px">
          <el-form-item label="CPU负载：预警阈值" label-width="140px">
            <el-input v-model="thForm.cpu.thresholdValue" size="small">
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 160px">
          <el-form-item label="报警阈值" label-width="80px">
            <el-input v-model="thForm.cpu.alarmValue" size="small">
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 210px">
          <el-form-item label="处置方式" label-width="80px">
            <el-select v-model="thForm.cpu.actionType" width="30px" size="small" placeholder="报警处置方式">
              <el-option label="服务限流" value="limit" />
              <el-option label="容器扩容" value="expand" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-input v-model="thForm.cpu.actionValue" size="small">
              <template v-if="thForm.cpu.actionType === 'limit'" slot="suffix">%</template>
              <template v-else-if="thForm.cpu.actionType === 'expand'" slot="suffix">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="updateSubmit('cpu' )">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- IO读 -->
      <el-row>
        <el-col style="width: 220px">
          <el-form-item label="IO读：预警阈值" label-width="140px">
            <el-input v-model="thForm.io_read.thresholdValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 160px">
          <el-form-item label="报警阈值" label-width="80px">
            <el-input v-model="thForm.io_read.alarmValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 210px">
          <el-form-item label="处置方式" label-width="80px">
            <el-select v-model="thForm.io_read.actionType" width="30px" size="small" placeholder="报警处置方式">
              <el-option label="服务限流" value="limit" />
              <el-option label="容器扩容" value="expand" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-input v-model="thForm.io_read.actionValue" size="small">
              <template v-if="thForm.io_read.actionType === 'limit'" slot="suffix">%</template>
              <template v-else-if="thForm.io_read.actionType === 'expand'" slot="suffix">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="updateSubmit('io_read' )">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- IO写 -->
      <el-row>
        <el-col style="width: 220px">
          <el-form-item label="IO写：预警阈值" label-width="140px">
            <el-input v-model="thForm.io_write.thresholdValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 160px">
          <el-form-item label="报警阈值" label-width="80px">
            <el-input v-model="thForm.io_write.alarmValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 210px">
          <el-form-item label="处置方式" label-width="80px">
            <el-select v-model="thForm.io_write.actionType" width="30px" size="small" placeholder="报警处置方式">
              <el-option label="服务限流" value="limit" />
              <el-option label="容器扩容" value="expand" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-input v-model="thForm.io_write.actionValue" size="small">
              <template v-if="thForm.io_write.actionType === 'limit'" slot="suffix">%</template>
              <template v-else-if="thForm.io_write.actionType === 'expand'" slot="suffix">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="updateSubmit('io_write' )">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 内存 -->
      <el-row>
        <el-col style="width: 220px">
          <el-form-item label="内存负载：预警阈值" label-width="140px">
            <el-input v-model="thForm.mem.thresholdValue" size="small">
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 160px">
          <el-form-item label="报警阈值" label-width="80px">
            <el-input v-model="thForm.mem.alarmValue" size="small">
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 210px">
          <el-form-item label="处置方式" label-width="80px">
            <el-select v-model="thForm.mem.actionType" width="30px" size="small" placeholder="报警处置方式">
              <el-option label="服务限流" value="limit" />
              <el-option label="容器扩容" value="expand" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-input v-model="thForm.mem.actionValue" size="small">
              <template v-if="thForm.mem.actionType === 'limit'" slot="suffix">%</template>
              <template v-else-if="thForm.mem.actionType === 'expand'" slot="suffix">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="updateSubmit('mem' )">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 交易数据 -->
      <el-row>
        <el-col style="width: 220px">
          <el-form-item label="交易数据：预警阈值" label-width="140px">
            <el-input v-model="thForm.trans.thresholdValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 160px">
          <el-form-item label="报警阈值" label-width="80px">
            <el-input v-model="thForm.trans.alarmValue" size="small">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 210px">
          <el-form-item label="处置方式" label-width="80px">
            <el-select v-model="thForm.trans.actionType" width="30px" size="small" placeholder="报警处置方式">
              <el-option label="服务限流" value="limit" />
              <el-option label="容器扩容" value="expand" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-input v-model="thForm.trans.actionValue" size="small">
              <template v-if="thForm.trans.actionType === 'limit'" slot="suffix">%</template>
              <template v-else-if="thForm.trans.actionType === 'expand'" slot="suffix">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 80px">
          <el-form-item label-width="10px">
            <el-button type="primary" size="small" @click="updateSubmit('trans' )">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      thForm: {
        cpu: {
          thresholdValue: null,
          alarmValue: null,
          actionType: null,
          actionValue: null
        },
        io_read: {
          thresholdValue: null,
          alarmValue: null,
          actionType: null,
          actionValue: null
        },
        io_write: {
          thresholdValue: null,
          alarmValue: null,
          actionType: null,
          actionValue: null
        },
        mem: {
          thresholdValue: null,
          alarmValue: null,
          actionType: null,
          actionValue: null
        },
        trans: {
          thresholdValue: null,
          alarmValue: null,
          actionType: null,
          actionValue: null
        }
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.$axios.get('/api/threshold/all').then(resp => {
        this.thForm = resp.data
      }).catch(function(error) {
        console.log(error)
      })
    },
    updateSubmit(type) {
      const formData = new FormData()
      formData.append('type', type)
      formData.append('value', this.thForm[type].thresholdValue)
      formData.append('alarm_value', this.thForm[type].alarmValue)
      formData.append('action_type', this.thForm[type].actionType)
      formData.append('action_value', this.thForm[type].actionValue)
      this.$axios.put(
        '/api/threshold',
        formData
      ).then(resp => {
        this.$message({
          message: '成功更新阈值',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .el-button--primary {
    color: #fff;
    background-color: #304156;
    border-color: #304156;
  }
</style>

